ประสิทธิภาพขนาด Anchor ของ CSS: การเพิ่มประสิทธิภาพการคำนวณมิติของ Anchor

ในการพัฒนาเว็บสมัยใหม่ การสร้างเลย์เอาต์ที่ตอบสนองและไดนามิกเป็นสิ่งสำคัญยิ่ง การกำหนดขนาด anchor ของ CSS โดยเฉพาะอย่างยิ่งกับฟีเจอร์อย่าง container queries และตัวแปร CSS เป็นเครื่องมือที่ทรงพลังในการบรรลุเป้าหมายนี้ อย่างไรก็ตาม การใช้งานที่ไม่มีประสิทธิภาพอาจนำไปสู่ปัญหาคอขวดด้านประสิทธิภาพได้ บทความนี้จะเจาะลึกถึงการเพิ่มประสิทธิภาพการคำนวณมิติของ anchor ใน CSS เพื่อปรับปรุงความเร็วในการเรนเดอร์และลด layout thrashing เพื่อให้ผู้เยี่ยมชมเว็บไซต์ของคุณได้รับประสบการณ์ที่ราบรื่นยิ่งขึ้น

ทำความเข้าใจเกี่ยวกับการกำหนดขนาด Anchor ของ CSS

การกำหนดขนาด anchor ของ CSS หมายถึงความสามารถในการกำหนดขนาดขององค์ประกอบหนึ่ง (องค์ประกอบที่ "ถูกยึด") โดยสัมพันธ์กับขนาดขององค์ประกอบอื่น (องค์ประกอบ "anchor") ซึ่งมีประโยชน์อย่างยิ่งสำหรับการสร้างคอมโพเนนต์ที่ปรับเปลี่ยนตามขนาดคอนเทนเนอร์ต่างๆ ได้อย่างลงตัว ทำให้ได้ดีไซน์ที่ตอบสนองและยืดหยุ่นมากขึ้น กรณีการใช้งานที่พบบ่อยที่สุดคือการใช้ container queries ซึ่งสไตล์จะถูกนำไปใช้ตามขนาดของคอนเทนเนอร์หลัก และตัวแปร CSS ซึ่งสามารถอัปเดตแบบไดนามิกเพื่อสะท้อนมิติของ anchor ได้

ตัวอย่างเช่น ลองพิจารณาคอมโพเนนต์การ์ดที่ต้องปรับเลย์เอาต์ตามความกว้างของคอนเทนเนอร์ ด้วยการใช้ container queries เราสามารถกำหนดสไตล์ที่แตกต่างกันสำหรับการ์ดเมื่อความกว้างของคอนเทนเนอร์เกินเกณฑ์ที่กำหนด

ผลกระทบด้านประสิทธิภาพ

แม้ว่าการกำหนดขนาด anchor ของ CSS จะมีความยืดหยุ่นสูง แต่สิ่งสำคัญคือต้องเข้าใจถึงผลกระทบด้านประสิทธิภาพที่อาจเกิดขึ้น เบราว์เซอร์จำเป็นต้องคำนวณขนาดขององค์ประกอบ anchor ก่อนที่จะสามารถกำหนดขนาดและเลย์เอาต์ขององค์ประกอบที่ถูกยึดได้ กระบวนการคำนวณนี้อาจสิ้นเปลืองทรัพยากร โดยเฉพาะอย่างยิ่งเมื่อต้องจัดการกับเลย์เอาต์ที่ซับซ้อนหรือขนาดของ anchor ที่เปลี่ยนแปลงบ่อยครั้ง เมื่อเบราว์เซอร์ต้องคำนวณเลย์เอาต์ใหม่หลายครั้งในช่วงเวลาสั้นๆ อาจนำไปสู่ "layout thrashing" ซึ่งส่งผลกระทบต่อประสิทธิภาพอย่างมาก

การระบุคอขวดของประสิทธิภาพ

ก่อนที่จะทำการเพิ่มประสิทธิภาพ สิ่งสำคัญคือต้องระบุพื้นที่เฉพาะที่การกำหนดขนาด anchor ก่อให้เกิดปัญหาด้านประสิทธิภาพ เครื่องมือสำหรับนักพัฒนาเบราว์เซอร์ (Browser developer tools) เป็นสิ่งล้ำค่าสำหรับงานนี้

การใช้เครื่องมือสำหรับนักพัฒนาเบราว์เซอร์

เบราว์เซอร์สมัยใหม่เช่น Chrome, Firefox และ Safari มีเครื่องมือสำหรับนักพัฒนาที่มีประสิทธิภาพสำหรับการวิเคราะห์ประสิทธิภาพของเว็บไซต์ นี่คือวิธีการใช้เครื่องมือเหล่านี้เพื่อระบุคอขวดของการกำหนดขนาด anchor:

• แท็บ Performance: ใช้แท็บ Performance (หรือเทียบเท่าในเบราว์เซอร์ของคุณ) เพื่อบันทึกไทม์ไลน์ของกิจกรรมบนเว็บไซต์ของคุณ มองหาส่วนที่ชื่อว่า "Layout" หรือ "Recalculate Style" ซึ่งบ่งชี้ถึงเวลาที่ใช้ในการคำนวณเลย์เอาต์ใหม่ ให้ความสนใจกับความถี่และระยะเวลาของเหตุการณ์เหล่านี้
• แท็บ Rendering: แท็บ Rendering (มักพบในส่วนเครื่องมือเพิ่มเติมของ developer tools) ช่วยให้คุณสามารถไฮไลต์ layout shifts ซึ่งสามารถบ่งชี้พื้นที่ที่การกำหนดขนาด anchor ทำให้เกิด reflow มากเกินไป
• Paint Profiling: วิเคราะห์เวลาในการ paint เพื่อระบุองค์ประกอบที่สิ้นเปลืองทรัพยากรในการเรนเดอร์ ซึ่งจะช่วยให้คุณสามารถเพิ่มประสิทธิภาพการจัดสไตล์ขององค์ประกอบที่ถูกยึดได้
• JavaScript Profiler: หากคุณใช้ JavaScript เพื่ออัปเดตตัวแปร CSS แบบไดนามิกตามขนาดของ anchor ให้ใช้ JavaScript profiler เพื่อระบุคอขวดด้านประสิทธิภาพในโค้ด JavaScript ของคุณ

ด้วยการวิเคราะห์ไทม์ไลน์ของประสิทธิภาพ คุณสามารถระบุองค์ประกอบและสไตล์เฉพาะที่ทำให้เกิดภาระด้านประสิทธิภาพได้ ข้อมูลนี้มีความสำคัญอย่างยิ่งในการชี้นำความพยายามในการเพิ่มประสิทธิภาพของคุณ

เทคนิคการเพิ่มประสิทธิภาพ

เมื่อคุณระบุคอขวดด้านประสิทธิภาพได้แล้ว คุณสามารถใช้เทคนิคการเพิ่มประสิทธิภาพต่างๆ เพื่อปรับปรุงประสิทธิภาพของการกำหนดขนาด anchor ได้

1. ลดการคำนวณองค์ประกอบ Anchor ให้น้อยที่สุด

วิธีที่มีประสิทธิภาพที่สุดในการปรับปรุงประสิทธิภาพคือการลดจำนวนครั้งที่เบราว์เซอร์ต้องคำนวณขนาดขององค์ประกอบ anchor ใหม่ นี่คือกลยุทธ์บางประการเพื่อให้บรรลุเป้าหมายนี้:

• หลีกเลี่ยงการเปลี่ยนแปลงขนาด Anchor บ่อยครั้ง: หากเป็นไปได้ ให้หลีกเลี่ยงการเปลี่ยนแปลงขนาดขององค์ประกอบ anchor บ่อยๆ การเปลี่ยนแปลงองค์ประกอบ anchor จะกระตุ้นให้เกิดการคำนวณเลย์เอาต์ขององค์ประกอบที่ถูกยึดใหม่ ซึ่งอาจสิ้นเปลืองทรัพยากร
• ใช้ Debounce หรือ Throttle ในการอัปเดตขนาด: หากคุณจำเป็นต้องอัปเดตตัวแปร CSS แบบไดนามิกตามขนาดของ anchor ให้ใช้เทคนิคเช่น debouncing หรือ throttling เพื่อจำกัดความถี่ในการอัปเดต สิ่งนี้จะช่วยให้มั่นใจได้ว่าการอัปเดตจะถูกนำไปใช้หลังจากช่วงเวลาที่กำหนดหรือในอัตราสูงสุดเท่านั้น ซึ่งจะช่วยลดจำนวนการคำนวณใหม่
• ใช้ `ResizeObserver` อย่างระมัดระวัง: `ResizeObserver` API ช่วยให้คุณสามารถติดตามการเปลี่ยนแปลงขนาดขององค์ประกอบได้ อย่างไรก็ตาม สิ่งสำคัญคือต้องใช้อย่างรอบคอบ หลีกเลี่ยงการสร้าง `ResizeObserver` instances มากเกินไป เนื่องจากแต่ละ instance สามารถเพิ่มภาระงานได้ นอกจากนี้ ตรวจสอบให้แน่ใจว่าฟังก์ชัน callback ได้รับการปรับให้เหมาะสมเพื่อหลีกเลี่ยงการคำนวณที่ไม่จำเป็น ลองพิจารณาใช้ `requestAnimationFrame` ภายใน callback เพื่อเพิ่มประสิทธิภาพการเรนเดอร์ให้ดียิ่งขึ้น

2. เพิ่มประสิทธิภาพ CSS Selectors

ความซับซ้อนของ CSS selectors อาจส่งผลกระทบอย่างมากต่อประสิทธิภาพ selectors ที่ซับซ้อนจะใช้เวลาในการประมวลผลนานขึ้น ซึ่งอาจทำให้กระบวนการเรนเดอร์ช้าลง

• ทำให้ Selectors เรียบง่าย: หลีกเลี่ยง selectors ที่ซับซ้อนเกินไปซึ่งมีการซ้อนกันขององค์ประกอบหรือ attribute selectors จำนวนมาก selectors ที่เรียบง่ายกว่าจะประมวลผลได้เร็วกว่า
• ใช้ Classes แทน Element Selectors: โดยทั่วไปแล้ว Classes จะเร็วกว่า element selectors ใช้ classes เพื่อกำหนดเป้าหมายองค์ประกอบเฉพาะแทนการใช้ชื่อองค์ประกอบหรือ structural selectors
• หลีกเลี่ยง Universal Selectors: universal selector (*) อาจสิ้นเปลืองทรัพยากรมาก โดยเฉพาะอย่างยิ่งเมื่อใช้ในเลย์เอาต์ที่ซับซ้อน หลีกเลี่ยงการใช้งานเว้นแต่จะจำเป็นจริงๆ
• ใช้คุณสมบัติ `contain`: คุณสมบัติ `contain` ของ CSS ช่วยให้คุณสามารถแยกส่วนของ DOM tree ซึ่งจำกัดขอบเขตของการทำงานของ layout และ paint ด้วยการใช้ `contain: layout;`, `contain: paint;` หรือ `contain: content;` คุณสามารถป้องกันการเปลี่ยนแปลงในส่วนหนึ่งของหน้าเว็บไม่ให้ไปกระตุ้นการคำนวณใหม่ในส่วนอื่น ๆ

3. เพิ่มประสิทธิภาพการเรนเดอร์

แม้ว่าคุณจะลดการคำนวณองค์ประกอบ anchor ให้น้อยที่สุดแล้ว แต่การเรนเดอร์องค์ประกอบที่ถูกยึดก็ยังคงเป็นคอขวดด้านประสิทธิภาพได้ นี่คือเทคนิคบางประการสำหรับการเพิ่มประสิทธิภาพการเรนเดอร์:

• ใช้ `will-change` อย่างเหมาะสม: คุณสมบัติ `will-change` จะแจ้งให้เบราว์เซอร์ทราบถึงการเปลี่ยนแปลงที่จะเกิดขึ้นกับองค์ประกอบ ทำให้เบราว์เซอร์สามารถเพิ่มประสิทธิภาพการเรนเดอร์ล่วงหน้าได้ อย่างไรก็ตาม สิ่งสำคัญคือต้องใช้อย่างประหยัด เนื่องจากการใช้มากเกินไปอาจทำให้ประสิทธิภาพลดลงได้ ใช้ `will-change` เฉพาะกับองค์ประกอบที่กำลังจะเปลี่ยนแปลง และลบออกเมื่อการเปลี่ยนแปลงเสร็จสิ้น
• หลีกเลี่ยงคุณสมบัติ CSS ที่สิ้นเปลืองทรัพยากร: คุณสมบัติ CSS บางอย่างเช่น `box-shadow`, `filter` และ `opacity` อาจสิ้นเปลืองทรัพยากรในการเรนเดอร์ ใช้คุณสมบัติเหล่านี้อย่างรอบคอบ และพิจารณาแนวทางอื่นหากเป็นไปได้ ตัวอย่างเช่น แทนที่จะใช้ `box-shadow` คุณอาจได้เอฟเฟกต์ที่คล้ายกันโดยใช้ภาพพื้นหลัง
• ใช้ Hardware Acceleration: คุณสมบัติ CSS บางอย่างเช่น `transform` และ `opacity` สามารถใช้ hardware-accelerated ได้ ซึ่งหมายความว่าเบราว์เซอร์สามารถใช้ GPU ในการเรนเดอร์ได้ ซึ่งจะช่วยปรับปรุงประสิทธิภาพได้อย่างมาก ตรวจสอบให้แน่ใจว่าคุณกำลังใช้คุณสมบัติเหล่านี้ในลักษณะที่เปิดใช้งาน hardware acceleration
• ลดขนาด DOM: โดยทั่วไปแล้ว DOM tree ที่มีขนาดเล็กกว่าจะเรนเดอร์ได้เร็วกว่า ลบองค์ประกอบที่ไม่จำเป็นออกจากโค้ด HTML ของคุณ และพิจารณาใช้เทคนิคเช่น virtualization เพื่อเรนเดอร์เฉพาะส่วนที่มองเห็นได้ของรายการขนาดใหญ่
• ปรับแต่งรูปภาพ: ปรับแต่งรูปภาพสำหรับเว็บโดยการบีบอัดและใช้รูปแบบไฟล์ที่เหมาะสม รูปภาพขนาดใหญ่อาจทำให้การเรนเดอร์ช้าลงอย่างมาก

4. ใช้ประโยชน์จากตัวแปร CSS และ Custom Properties

ตัวแปร CSS (หรือที่เรียกว่า custom properties) เป็นวิธีที่มีประสิทธิภาพในการอัปเดตสไตล์แบบไดนามิกตามขนาดของ anchor อย่างไรก็ตาม สิ่งสำคัญคือต้องใช้อย่างมีประสิทธิภาพเพื่อหลีกเลี่ยงปัญหาด้านประสิทธิภาพ

• ใช้ตัวแปร CSS สำหรับ Theming: ตัวแปร CSS เหมาะอย่างยิ่งสำหรับการทำ theming และสถานการณ์การจัดสไตล์แบบไดนามิกอื่น ๆ ช่วยให้คุณสามารถเปลี่ยนรูปลักษณ์ของเว็บไซต์ได้โดยไม่ต้องแก้ไขโค้ด HTML
• หลีกเลี่ยงการอัปเดตตัวแปร CSS ด้วย JavaScript หากเป็นไปได้: แม้ว่า JavaScript จะสามารถใช้เพื่ออัปเดตตัวแปร CSS ได้ แต่มันอาจเป็นคอขวดด้านประสิทธิภาพ โดยเฉพาะอย่างยิ่งหากการอัปเดตเกิดขึ้นบ่อยครั้ง หากเป็นไปได้ ให้พยายามหลีกเลี่ยงการอัปเดตด้วย JavaScript และใช้กลไกที่ใช้ CSS เป็นหลัก เช่น container queries หรือ media queries
• ใช้ฟังก์ชัน `calc()` ของ CSS: ฟังก์ชัน `calc()` ของ CSS ช่วยให้คุณสามารถคำนวณค่าภายใน CSS ได้ ซึ่งอาจมีประโยชน์ในการหาขนาดขององค์ประกอบตามขนาดของคอนเทนเนอร์ ตัวอย่างเช่น คุณสามารถใช้ `calc()` เพื่อคำนวณความกว้างของการ์ดตามความกว้างของคอนเทนเนอร์ ลบด้วย padding บางส่วน

5. ใช้ Container Queries อย่างมีประสิทธิภาพ

Container queries ช่วยให้คุณสามารถใช้สไตล์ที่แตกต่างกันตามขนาดขององค์ประกอบคอนเทนเนอร์ นี่เป็นคุณสมบัติที่ทรงพลังสำหรับการสร้างเลย์เอาต์ที่ตอบสนอง แต่สิ่งสำคัญคือต้องใช้อย่างมีประสิทธิภาพเพื่อหลีกเลี่ยงปัญหาด้านประสิทธิภาพ

• ใช้ Container Queries อย่างรอบคอบ: หลีกเลี่ยงการใช้ container queries มากเกินไป เนื่องจากแต่ละ query สามารถเพิ่มภาระงานได้ ใช้ container queries เมื่อจำเป็นเท่านั้น และพยายามรวม query เข้าด้วยกันหากเป็นไปได้
• ปรับเงื่อนไขของ Container Query ให้เหมาะสม: ทำให้เงื่อนไขใน container queries ของคุณเรียบง่ายที่สุดเท่าที่จะทำได้ เงื่อนไขที่ซับซ้อนอาจประมวลผลได้ช้า
• พิจารณาประสิทธิภาพก่อนใช้ Polyfills: นักพัฒนาหลายคนต้องพึ่งพา polyfills เพื่อให้ฟังก์ชัน container query ทำงานได้ในเบราว์เซอร์รุ่นเก่า อย่างไรก็ตาม โปรดทราบว่า polyfills จำนวนมากเป็นโซลูชัน JavaScript ที่มีขนาดใหญ่และไม่มีประสิทธิภาพ ทดสอบ polyfills ใด ๆ อย่างละเอียดและพิจารณาแนวทางอื่นหากเป็นไปได้

6. ใช้กลยุทธ์การแคช

การแคชสามารถปรับปรุงประสิทธิภาพของเว็บไซต์ได้อย่างมากโดยการลดจำนวนครั้งที่เบราว์เซอร์ต้องดึงทรัพยากรจากเซิร์ฟเวอร์ นี่คือกลยุทธ์การแคชบางอย่างที่เป็นประโยชน์:

• Browser Caching: กำหนดค่าเว็บเซิร์ฟเวอร์ของคุณให้ตั้งค่า cache headers ที่เหมาะสมสำหรับ static assets เช่น ไฟล์ CSS, ไฟล์ JavaScript และรูปภาพ ซึ่งจะช่วยให้เบราว์เซอร์สามารถแคช assets เหล่านี้ได้ ลดจำนวนการร้องขอไปยังเซิร์ฟเวอร์
• Content Delivery Network (CDN): ใช้ CDN เพื่อกระจาย assets ของเว็บไซต์ของคุณไปยังเซิร์ฟเวอร์ทั่วโลก ซึ่งจะช่วยลด latency และปรับปรุงเวลาในการโหลดสำหรับผู้ใช้ในตำแหน่งทางภูมิศาสตร์ที่แตกต่างกัน
• Service Workers: Service workers ช่วยให้คุณสามารถแคชทรัพยากรและให้บริการจากแคชได้แม้ในขณะที่ผู้ใช้ออฟไลน์ ซึ่งจะช่วยปรับปรุงประสิทธิภาพของเว็บไซต์ของคุณได้อย่างมาก โดยเฉพาะบนอุปกรณ์มือถือ

ตัวอย่างการใช้งานจริงและ Code Snippets

มาดูตัวอย่างการใช้งานจริงบางส่วนเกี่ยวกับวิธีเพิ่มประสิทธิภาพการกำหนดขนาด anchor ของ CSS

ตัวอย่างที่ 1: การ Debounce การอัปเดตมิติ

ในตัวอย่างนี้ เราใช้ debouncing เพื่อจำกัดความถี่ในการอัปเดตตัวแปร CSS ตามขนาดขององค์ประกอบ anchor

            
function debounce(func, delay) {
 let timeoutId;
 return function(...args) {
 clearTimeout(timeoutId);
 timeoutId = setTimeout(() => {
 func.apply(this, args);
 }, delay);
 };
}

const anchorElement = document.getElementById('anchor');
const anchoredElement = document.getElementById('anchored');

function updateAnchoredElement() {
 const width = anchorElement.offsetWidth;
 anchoredElement.style.setProperty('--anchor-width', `${width}px`);
}

const debouncedUpdate = debounce(updateAnchoredElement, 100);

window.addEventListener('resize', debouncedUpdate);
updateAnchoredElement(); // Initial update

            

              
                Copy
              
            
          

ในโค้ดนี้ ฟังก์ชัน debounce จะช่วยให้แน่ใจว่าฟังก์ชัน updateAnchoredElement จะถูกเรียกหลังจากผ่านไป 100ms เท่านั้น ซึ่งจะช่วยป้องกันไม่ให้องค์ประกอบที่ถูกยึดได้รับการอัปเดตบ่อยเกินไป และลด layout thrashing

ตัวอย่างที่ 2: การใช้คุณสมบัติ contain

นี่คือตัวอย่างวิธีการใช้คุณสมบัติ contain เพื่อแยกการเปลี่ยนแปลงเลย์เอาต์

            
.anchor {
 width: 50%;
 height: 200px;
 background-color: #eee;
}

.anchored {
 contain: layout;
 width: calc(var(--anchor-width) / 2);
 height: 100px;
 background-color: #ddd;
}

            

              
                Copy
              
            
          

โดยการตั้งค่า contain: layout; บนองค์ประกอบ .anchored เราจะป้องกันไม่ให้การเปลี่ยนแปลงเลย์เอาต์ของมันส่งผลกระทบต่อส่วนอื่น ๆ ของหน้าเว็บ

ตัวอย่างที่ 3: การเพิ่มประสิทธิภาพ Container Queries

ตัวอย่างนี้แสดงวิธีการเพิ่มประสิทธิภาพ container queries โดยใช้เงื่อนไขที่เรียบง่ายและหลีกเลี่ยง query ที่ไม่จำเป็น

            
.container {
 container-type: inline-size;
}

.card {
 width: 100%;
}

@container (min-width: 400px) {
 .card {
 width: 50%;
 }
}

@container (min-width: 800px) {
 .card {
 width: 33.33%;
 }
}

            

              
                Copy
              
            
          

ในตัวอย่างนี้ เราใช้ container queries เพื่อปรับความกว้างของการ์ดตามความกว้างของคอนเทนเนอร์ เงื่อนไขนั้นเรียบง่ายและตรงไปตรงมา หลีกเลี่ยงความซับซ้อนที่ไม่จำเป็น

การทดสอบและการตรวจสอบ

การเพิ่มประสิทธิภาพเป็นกระบวนการที่ต่อเนื่อง หลังจากใช้เทคนิคการเพิ่มประสิทธิภาพแล้ว สิ่งสำคัญคือต้องทดสอบและตรวจสอบประสิทธิภาพของเว็บไซต์ของคุณเพื่อให้แน่ใจว่าการเปลี่ยนแปลงนั้นช่วยปรับปรุงประสิทธิภาพได้จริง ใช้เครื่องมือสำหรับนักพัฒนาเบราว์เซอร์เพื่อวัดเวลาในการคำนวณเลย์เอาต์ เวลาในการเรนเดอร์ และเมตริกประสิทธิภาพอื่น ๆ ตั้งค่าเครื่องมือตรวจสอบประสิทธิภาพเพื่อติดตามประสิทธิภาพเมื่อเวลาผ่านไปและระบุการถดถอยใด ๆ

สรุป

การกำหนดขนาด anchor ของ CSS เป็นเครื่องมือที่ทรงพลังสำหรับการสร้างเลย์เอาต์ที่ตอบสนองและไดนามิก อย่างไรก็ตาม สิ่งสำคัญคือต้องเข้าใจถึงผลกระทบด้านประสิทธิภาพที่อาจเกิดขึ้นและใช้เทคนิคการเพิ่มประสิทธิภาพเพื่อลด layout thrashing และปรับปรุงความเร็วในการเรนเดอร์ ด้วยการปฏิบัติตามกลยุทธ์ที่ระบุไว้ในบทความนี้ คุณสามารถมั่นใจได้ว่าเว็บไซต์ของคุณจะมอบประสบการณ์ผู้ใช้ที่ราบรื่นและตอบสนองได้ดี แม้ในสถานการณ์การกำหนดขนาด anchor ที่ซับซ้อน อย่าลืมทดสอบและตรวจสอบประสิทธิภาพของเว็บไซต์ของคุณเสมอเพื่อให้แน่ใจว่าความพยายามในการเพิ่มประสิทธิภาพของคุณมีประสิทธิผล

ด้วยการนำกลยุทธ์เหล่านี้มาใช้ นักพัฒนาสามารถสร้างเว็บไซต์ที่ตอบสนองได้ดีขึ้น มีประสิทธิภาพมากขึ้น และเป็นมิตรกับผู้ใช้มากขึ้น ซึ่งสามารถปรับให้เข้ากับขนาดหน้าจอและอุปกรณ์ต่าง ๆ ได้อย่างราบรื่น กุญแจสำคัญคือการทำความเข้าใจกลไกพื้นฐานของการกำหนดขนาด anchor ของ CSS และการใช้เทคนิคการเพิ่มประสิทธิภาพอย่างมีกลยุทธ์